  <template>
  <div>
    <div class='header'>
      <div style="margin-top: -9.5px;"><h4>表格标题</h4></div>
      <button class="position new">新建</button>
      <button class="position edit">修改</button>
      <button class="position delete">刪除</button>
      <button class="position import">导入</button>
      <button class="position export">导出</button>
    </div>
    <slot name='table'>
    </slot>
  </div>
  </template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

  <style scoped>
  .header {
    width: 100%;
    height: 50px;
    background-color: #fafafa;
    border: 1px solid #ddd;
    position: relative;
}
  .header .position {
    position:absolute;
}
  .header .new {
    position:absolute;
    height: 36px;
    color: #fff;
    top: 7px;
    right: 320px;
    border-radius: 5px;
    width: 70px;
    background-color: #1989Fa
}
  .header .edit {
    position:absolute;
    height: 36px;
    top: 7px;
    right: 240px;
    border-radius: 5px;
    width: 70px;
    background-color: #fff
}
  .header .delete {
    position:absolute;
    height: 36px;
    top: 7px;
    right: 160px;
    border-radius: 5px;
    width: 70px;
    background-color: #fff
}
  .header .import {
    position:absolute;
    height: 36px;
    top: 7px;
    right: 80px;
    border-radius: 5px;
    width: 70px;
    background-color: #fff
}
  .header .export {
    position:absolute;
    height: 36px;
    top: 7px;
    right: 0px;
    border-radius: 5px;
    width: 70px;
    background-color: #fff
}

  </style>
